<template>
  <div>
    <!-- <h1>购物车</h1> -->
    <Controls></Controls>
    <table>
      <thead>
        <td>序号</td>
        <td>种类</td>
        <td>单价</td>
        <td>数量</td>
      </thead>
      <tr v-for="(f,i) of state" :key="i">
        <td>{{i}}</td>
        <td>{{f.name}}</td>
        <td>{{f.price}}</td>
        <td>
          <Counter
            :quatity="f.quatity"
            :index="i"
            @add="add"
            @sub="sub"
          ></Counter>
        </td>
      </tr>
    </table>
    <h1>总价：{{totalPrice}}</h1>
    <h1>总数：{{totalQuatity}}</h1>
  </div>
</template>

<script>
import Counter from "./Counter"
import Controls from "./Controls"
import store from "../store"
  export default{
    components:{
      Counter,
      Controls
    },
    data(){
      return{
        state:store.state.dataList,
        // totalPrice:10
      }
    },
    methods:{
      add(index){
        store.state.dataList[index].quatity++
      },
      sub(index){
        if(store.state.dataList[index].quatity>0){
          store.state.dataList[index].quatity--
        }
      }
    },
    computed:{
        totalPrice(){
            let total_price = 0;
                this.state.forEach(data => {
                    total_price += data.quatity * data.pirce
                })
            return total_price.toFixed(2)
        },
        totalQuatity(){
            let total_quatity = 0;
                this.state.forEach(data => {
                    total_quatity += data.quatity
                })
            return total_quatity
        }
    }
  }
</script>

<style>

</style>
